<template>
	<view class='car'>
		<view class='carList'>
			<view class="shopOne dFlex jStart_aCenter" v-for="(item,index) in 1" :key='index'>
				<view class="chooseIcon imgPublic">
					<image src="../static/images/unchoose.png" mode="widthFix"></image>
					<!-- <u-icon size="20" color="#f32c2c" name="checkmark-circle-fill"></u-icon> -->
				</view>
				<view class="shopInfo dFlex jStart_aStart">
					<view class="shopImg imgPublic">
						<image src="../static/logo.png" mode="widthFix"></image>
					</view>
					<view class="otherInfo">
						<view class="shopName dFlex jBetween_aStart">
							<view class="name">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</view>
							<u-icon size="20" name="trash"></u-icon>
						</view>
						<view class="guige">规格：测试规格</view>
						<view class="tool dFlex jBetween_aCenter">
							<view class="price">￥0.02</view>
							<!-- v-model="value" @change="valChange" -->
							<u-number-box ></u-number-box>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class='emptyList'>
			<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png" > </u-empty>
			<view class="btns">
				<u-button text="去逛逛" color='#ff3b3b' size='small' style="width: 40px;display: block;margin: 10px auto;"></u-button>
			</view>
		</view>
		<view class="hotSale">看看热卖</view>
		<view class="shops dFlex jBetween_aStart fWap">
			<view class="shopOne" v-for="(item,index) in 5" :key='index'>
				<view class="shopImg imgPublic dFlex jCenter_aCenter">
					<image src="../static/logo.png" mode="widthFix"></image>
				</view>
				<view class="shopInfo">
					<view class="shopName">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</view>
					<view class="shopPrice dFlex jBetween_aCenter">
						<view class="price">￥<text>200.00</text></view>
						<view class="sale">已售出18件</view>
					</view>
				</view>
			</view>
		</view>
		<view class="seat"></view>
		<view class="tools dFlex jBetween_aCenter">
			<view class="operate dFlex jStart_aCenter">
				<view class="selStatus dFlex jStart_aCenter" @tap='changeAll_sel'>
					<view class="statusIcon imgPublic">
						<image src="../static/images/unchoose.png" mode="widthFix"></image>
						<!-- <u-icon size="20" color="#f32c2c" name="checkmark-circle-fill"></u-icon> -->
					</view>
					<text>全选</text>
				</view>
				<text class="del">删除</text>
			</view>
			<view class="tj dFlex jEnd_aCenter">
				<view class="allPrice">合计 <text>¥0.00</text> </view>
				<view class="jiesuan" >去结算</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.tools{
		width: 100%;
		background: white;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 6px 12px;
		box-sizing: border-box;
		.tj{
			flex: 1;
			font-size: 14px;
			.allPrice{
				text{
					color: #ff3b3b;
					font-weight: bold;
				}
			}
			.jiesuan{
				width: max-content;
				padding: 8px 20px;
				color: white;
				background: #ff3b3b;
				border-radius: 40px;
				margin-left: 12px;
				font-weight: bold;
			}
		}
		.operate{
			width: auto;
			.del{
				font-size: 14px;
				color: #999999;
			}
			.selStatus{
				width: auto;
				font-size: 14px;
				margin-right: 12px;
				.statusIcon{
					width: 20px;
					margin-right: 8px;
				}
			}
		}
	}
	.shops{
		width: calc(100% - 24px);
		margin:0 auto;
		.shopOne{
			.shopInfo{
				.shopPrice{
					width:100%;
					margin-top: 12px;
					.sale{
						color:#999999;
						font-size: 12px;
					}
					.price{
						color:#ff3b3b;
						font-size: 12px;
						text{
							font-size: 13px;
						}
					}
				}
				.shopName{
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					font-size: 14px;
					color:#333;
				}
				width:100%;
				background:white;
				padding:12px;
				box-sizing: border-box;
				border-radius: 2px;
			}
			.shopImg{
				width:100%;
				height:169.5px;
				image{
					border-radius: 2px;
				}
			}
			width:calc((100% - 12px) / 2);
			margin-bottom:12px;
		}
	}
	.hotSale{
		width:100%;
		text-align: center;
		padding: 12px 0;
		background: white;
		font-size: 14px;
		margin:12px 0;
	}
	.carList{
		.shopOne{
			.shopInfo{
				width:calc(100% - 38px);
				.otherInfo{
					width: calc(100% - 100px);
					.tool{
						width:100%;
						.price{
							color:#ff3b3b;
							font-size: 14px;
							font-weight: bold;
						}
					}
					.guige{
						font-size: 12px;
						padding: 5px 0;
						color: #999999;
					}
					.shopName{
						width: 100%;
						.name{
							width: calc(100% - 20px);
							overflow:hidden;
							word-wrap: break-word;
							text-overflow:ellipsis;
							display:-webkit-box;
							-webkit-box-orient:vertical;
							-webkit-line-clamp:2;  
							font-size: 14px;
						}
					}
				}
				.shopImg{
					width:90px;
					height:90px;
					margin-right: 10px;
					image{
						border-radius: 4px;
					}
				}
			}
			.chooseIcon{
				width: 20px;
				height: 20px;
				margin-right: 10px;
			}
			width:100%;
			padding:10px;
			box-sizing: border-box;
			background: white;
			border-radius: 4px;
			margin-bottom: 12px;
		}
		width:calc(100% - 24px);
		margin:0 auto;
	}
	.emptyList{
		.btns{
			width: 120px;
			margin: 10px auto;
		}
		width:100%;
	}
</style>
